<template>
	<div>
		<text class="form-title">位置信息</text>
		<baseForm :formInline="formInline" :formItem="formItem" @changePicker="changePicker"></baseForm>
	</div>

</template>

<script>
	import baseForm from "../../components/current/vForm.vue";
	import areaData from '../../static/js/city.four.js';

	export default {
		components: {
			baseForm
		},
		data() {
			return {
				//表格参数
				formItem: [{
					type: 'input',
					label: "基地名称",
					placeholder: "请输入基地名称",
					clumn: 'name'
				}, {
					type: 'picker',
					pickerType: '',
					label: "基地类型",
					placeholder: "请选择基地类型",
					array: ['第一个', '第二个', '第三个'],
					index: "",
					clumn: 'baseType'
				}, {
					type: 'picker',
					pickerType: '',
					label: "种养类型",
					placeholder: "请选择种养类型",
					array: ['种养第一个', '第二个', '第三个'],
					index: "",
					clumn: 'plantType'
				}, {
					type: 'input',
					label: "种养规模",
					placeholder: "请输入种养规模",
					inputEnd: 'select',
					options: [{
						value: '1',
						name: '亩'
					}, {
						value: '1',
						name: '公斤'
					}],
					clumn: 'scale'
				}, {
					type: 'picker',
					pickerType: 'multiSelector',
					label: "所在地区",
					placeholder: "请选择所在地区",
					multiArray: areaData,
					multiIndex: [0, 0, 0, 0],
					clumn: 'area'
				}, {
					type: 'input',
					label: "基地负责人",
					placeholder: "请输入基地负责人",
					clumn: 'director'
				}, {
					type: 'input',
					label: "负责人电话",
					inputType:'number',
					placeholder: "请输入负责人电话",
					clumn: 'phone'
				}, {
					type: 'uploadFile',
					label: '图片上传',
					labelPosition:'top',
					fileType: 'image',
					clumn: 'imgArr'
				}, {
					type: 'textarea',
					placeholder: "请输入详细内容",
					clumn: 'detailInfo'
				}],
				//表单字段数据
				formInline: {
					name: "",
					baseType: "",
					plantType: "",
					scale: "",
					area: "",
					director: "",
					phone: "",
					imgArr: [],
					detailInfo: "",
				},
			}
		},

		methods: {
			// 选择器发生改变时
			changePicker(i, clumn, value) {
				let item = this.formItem[i];
				// 普通选择器赋值
				if (item.pickerType == '' || item.pickerType == 'selector') {
					this.formInline[clumn] = item.array[value];
					return
				}
				//时间选择器赋值
				if (item.pickerType == 'date') {
					this.formInline[clumn] = value;
					console.log("-------" + this.formInline[clumn])
					return
				}
				//多列选择器赋值（省-市-区-街道四级联动）
				if (value[0] != item.multiIndex[0]) { //第一列改变时后面的列重置
					value[1] = 0;
					value[2] = 0;
					value[3] = 0;
				}
				if (value[1] != item.multiIndex[1]) { //第二列改变时后面的列重置
					value[2] = 0;
					value[3] = 0;
				}
				if (value[2] != item.multiIndex[2]) { //第二列改变时后面的列重置
					value[3] = 0;
				}
				if (item.pickerType == 'multiSelector') {
					item.multiIndex = value;
					let firstCol = item.multiArray[item.multiIndex[0]];
					let secondCol = firstCol.children[item.multiIndex[1]];
					let thirdCol = secondCol.children[item.multiIndex[2]];
					let fourCol = thirdCol.children[item.multiIndex[3]];
					this.formInline[clumn] = firstCol.name + "-" + secondCol.name + "-" + thirdCol.name + "-" + fourCol.name;
					return
				}
			},

		}
	}
</script>

<style>
	.form-title {
		padding: 0 5%;
		color: rgb(136, 136, 136);
		line-height: 60rpx;
	}
</style>
